<% manifest = JSON.parse(File.read('source/assets/images/sprites/docs.json')) %>
%icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: asset_url('icons.png');
  background-size: 4rem 6rem;
}

%svg-icon {
  display: inline-block;
  vertical-align: top;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  fill: currentColor;
}

%doc-icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: image-url('sprites/docs.png');
  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
}


@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  %icon { background-image: asset_url('icons@2x.png'); }
  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
}

html._theme-dark {
  %darkIconFix {
    filter: invert(100%) grayscale(100%);
    -webkit-filter: invert(100%) grayscale(100%);
  }
}


%icon-dir                   { background-position: 0 0; }
%icon-search                { background-position: -1rem 0; }
%icon-link                  { background-position: -2.25rem -.25rem; }
%icon-clear                 { background-position: -3rem 0; }
%icon-settings              { background-position: 0 -1rem; }
%icon-check                 { background-position: -1rem -1rem; }
%icon-menu                  { background-position: -2rem -1rem; @extend %darkIconFix !optional; }
%icon-home                  { background-position: -3rem -1rem; @extend %darkIconFix !optional; }
%icon-path                  { background-position: 0 -2rem; }
%icon-search-white          { background-position: -1rem -2rem; }
%icon-dir-white             { background-position: -2rem -2rem; }
%icon-link-white            { background-position: -3.25rem -2.25rem; }
%icon-settings-white        { background-position: 0 -3rem; }
%icon-check-white           { background-position: -1rem -3rem; }
%icon-light                 { background-position: -2rem -3rem; }
%icon-light-white           { background-position: -3rem -3rem; }
%icon-expand                { background-position: 0 -4rem; }
%icon-contract              { background-position: -1rem -4rem; }
%icon-expand-white          { background-position: -2rem -4rem; }
%icon-contract-white        { background-position: -3rem -4rem; }
%icon-clipboard             { background-position: 0 -5rem; }
%icon-clipboard-white       { background-position: -1rem -5rem; }
%icon-close-white           { background-position: -2rem -5rem; }
%icon-back                  { background-position: -3rem -5rem; @extend %darkIconFix !optional; }

<%=
  items = []

  manifest['items'].each do |item|
    rules = []
    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
  end

  items.join('')
 %>
